// 更新数据
export const updateProgress = function (e) {
  this.drawProgress(parseFloat(e.target.value))
}
// 绘制进度条
export const drawProgress = function (progress) {
  const canvas = document.getElementById('progressCanvas')
  const ctx = canvas.getContext('2d')
  const x = canvas.width / 2
  const y = canvas.height / 2
  const radius = 70
  ctx.clearRect(0, 0, canvas.width, canvas.height) // 清除画布
  // 创建圆锥渐变
  const gradient = ctx.createConicGradient(0, x, y)
  gradient.addColorStop(0, 'rgba(222, 19, 80, 1)')
  gradient.addColorStop(0.25, 'rgba(255, 175, 19, 1)')
  gradient.addColorStop(0.5, 'rgba(111, 232, 191, 1)')
  gradient.addColorStop(0.75, 'rgba(133, 14, 205, 1)')
  gradient.addColorStop(1, 'rgba(222, 19, 80, 1)')
  // 绘制完整的底层圆环
  ctx.beginPath()
  ctx.arc(x, y, radius, 0, 2 * Math.PI)
  ctx.lineWidth = 15
  ctx.strokeStyle = gradient
  ctx.lineCap = 'round' // 设置线条端点为圆形
  ctx.stroke()
  // 遮罩效果，只显示进度部分
  ctx.globalCompositeOperation = 'destination-in'
  ctx.beginPath()
  ctx.arc(x, y, radius, -1.25 * Math.PI, (-1.25 * Math.PI) + (1.5 * Math.PI * progress))
  ctx.lineWidth = 15
  ctx.stroke()
  // 重置 composite 操作，以防影响后续绘图
  ctx.globalCompositeOperation = 'source-over'
}